<template>
  <div>
      <van-cell title="历史记录">
        <div v-if="isDeleteShow">
          <span @click="searchHistory.splice(0)">全部删除</span>
          <span @click="isDeleteShow = false">&nbsp;完成</span>
        </div>
        <van-icon v-else name="delete-o" slot="right-icon" class="delete-icon" @click="isDeleteShow = true"/>
      </van-cell>
      <van-cell :title="item" v-for="(item, index) in searchHistory" :key="index" @click="onSearchClick(item,index)">
        <van-icon name="close" slot="right-icon" class="delete-icon" v-show="isDeleteShow"/>
      </van-cell>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isDeleteShow: false // 控制删除显示状态
    }
  },
  props: {
    searchHistory: {
      type: Array,
      required: true
    }
  },
  methods: {
    onSearchClick (item, index) {
      if (this.isDeleteShow) {
        // 删除
        this.searchHistory.splice(index, 1)
      } else {
        // 搜索
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.delete-icon {
  margin-top: 16px;
}
</style>
